<html ng-app="app">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <title>账号密码设置</title>
    <style>
        body{
    background: linear-gradient(135deg, #52E5E7 0%, #130CB7 100%)
   }     
   a{
    text-decoration:none;
   }
   .loading{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
   }
.loading .text{
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 18px;
    transform: translate(-50%, -50%);
    padding: .5rem;
    background: rgba(0, 0, 0, .6);
    border-radius: 10px;
}
    .alert-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    background-color: rgba(0, 0, 0, .5);
}  
#alertBox {
    width: 2.2rem;
    min-height: 1rem;
    opacity: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -1.1rem;
    transition: all 0.5s;
    border-radius: 0.04rem;
    padding-top: 0.96rem;
    line-height: 0.16rem;
    text-align: center;
    font-size: 0.15rem;
    color: rgba(0, 0, 0, 0.54);
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.3);
    z-index: 100000;
}

#alertBox.success {
    background: #fff url(http://faxm.13w.top:2092/xxds/files/images/newgame/alertBox_success.png) no-repeat center 0.384rem / 0.384rem 0.384rem;
}

#alertBox.error {
    background: #fff url(http://faxm.13w.top:2092/xxds/files/images/newgame/alertBox_error.png) no-repeat center 0.384rem / 0.384rem 0.384rem;
}

#alertBox.puncherror {
    background: #fff url(http://faxm.13w.top:2092/xxds/files/images/newgame/punch_caution.png) no-repeat center 0.384rem / 0.384rem 0.384rem;
}

#alertBox .context {
    margin-bottom: 0.384rem;
    padding: 0 0.1rem;
}

#alertBox .closed {
    width: 2.2rem;
    height: 0.4rem;
    line-height: 0.4rem;
    display: inline-block;
    font-size: 0.145rem;
    color: #b39851;
    text-align: center;
    border-top: 0.01rem solid #f5f5f5;
}
.transferFrame{position: fixed;z-index: 99;width: 80vw;max-width: 80vw; top: 50%; left: 50%;-webkit-transform:translate(-50%,-60%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden;opacity: 1; color: white;}
 .transferFrame .title{padding: 1vw;font-size: 4vw; line-height: 5vw; word-wrap: break-word;word-break: break-all;color: #000;background-color: white;}
 .transferFrame .transferConfirm{position: relative; left: 4vw;width: 72vw;line-height: 10vw; font-size: 4vw;display: flex;border-radius: 5vw;}
 .transferFrame .transferConfirm .confirm{display: block;-webkit-box-flex:1;flex: 1;text-decoration: none;-webkit-tap-highlight-color:transparent;position: relative;margin-bottom: 0;color: rgb(255,255,255);border-top: solid;border-color: #e6e6e6;border-width: 0px;background-color: rgb(64,112,251);border-radius: 5vw;}
 .toRow{position: relative;width: 100%;height: 15vw;line-height: 15vw;background-color: #fff;text-align: center;margin-top: 0.3vh;color: orange;overflow:hidden;}
 .toRow .avatar{position: absolute;top: 1vw;left: 4vw;}
 .toRow .avatar img{position: absolute;top: 0;left: 0;margin-left: 0;width: .5rem;height: .5rem;border-radius: 1vh;}
 .toRow .name{position: absolute;left: 20vw;width: 50vw;height: 15vw;line-height: 15vw;font-size: 2.2vh;text-align: left;}
 .toRow .select{position: absolute;top: 2.5vw;left: 68vw;width: 10vw;height: 10vw;color: #33ddff;border: solid .2vw;border-radius: 50%;}
 .toRow .select img{width: 10vw;height: 10vw;}

</style>
    <script type="text/javascript" src="http://faxm.13w.top:2092/xxds/files/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://faxm.13w.top:2092/xxds/files/js/angular.min.js"></script>
    <script type="text/javascript" src="http://faxm.13w.top:2092/xxds/files/js/fastclick.js"></script>
    <script type="text/javascript">
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 360 * 100 + 'px';
    </script>
	
<script src="/xds/config.js" charset="utf-8"></script>
<script type="text/javascript">
    var baseUrl = "http://" + window.location.host;
    var hall = "xds";
    var hallKey = "";
</script>
<script>
    var wx_ip = "";
    var wx_port = "200";
    let token = localStorage.getItem('token');
    console.log("token :" + token);
    var userInfo = {
        id: 0,
        cards: "0",
        nickname: "",
        headimgurl: "",
        individuality: "",
        is_opengroup: 0,
        tel: "",
        token: "",
    };
    var ports = {
        bpg: 200,
        bull: 200,
        chat: 200,
        ebg: 200,
        gfl: 200,
        jsg: 200,
        lobby: 200,
        pg: 200,
        sag: 200,
    };
    var hallUrl = "http://" + window.location.host + "/"+hallKey+".html";

</script>
<script src="http://faxm.13w.top:2092/xxds/common.js" charset="utf-8"></script>
<script>
    var baseUrl= "http://" + window.location.host+"/"+hallKey+".html";
</script>
</head>

<body ng-controller="myCtrl">

    <div class="loading" ng-show="false">
        <div class="text">加载中...</div>
    </div>
    <div class="main">


        <div style="position: fixed;top:5%;left:0;width: 100%;text-align: center;font-size: 18px;font-family: 微软雅黑;line-height: 50px;">
            <img src="{{userInfo.headimgurl}}" style="width: 100px;height: 100px; vertical-align: middle;border-radius: 10px;">
        <label>{{userInfo.nickname}}(ID:{{userInfo.id}})</label>
        </div>  
          
        <div id="validePhone" ng-show="isShowValid">
            <div class="phoneMask" style="position: fixed;z-index: 98;top: 0;left: 0;width: 100%;height: 100%;"
                ng-click="hideBindPhone()"></div>
            <div class="phoneFrame" style="position: fixed;z-index: 99;width: 80vw;max-width: 80vw; top: 50%; left: 50%;-webkit-transform:translate(-50%,-60%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden;opacity: 1; color: white;">
                <div style="height: 2.2vw;"></div>

                <div style="padding: 0vh;font-size: 3.5vw; line-height: 8vw; word-wrap: break-word;word-break: break-all;color: #000;background-color: white;">
                    设置账号密码
                </div>
                <div style="height: 2.2vw;"></div>
                <div style="position: relative;height: 15vw;word-wrap: break-word;word-break: break-all;color: #000;background-color: white;border-top: solid;border-color: #e6e6e6;border-width: 0px;">

                    <input  ng-input="phoneChange()" ng-model="sPhone" type="text" name="phone" placeholder="输入账号"
                        style="padding:0 12px 0 12px;position: absolute;top:  2.5vw;left: 4vw;width: 72vw;height: 11vw;line-height: 6.5vw;border-style: solid;border-width: 1px;border-radius: 0.5vh;border-color: #e6e6e6;font-size: 4vw;-webkit-appearance: none;">
                </div>
                <div style="position: relative;height: 15vw;word-wrap: break-word;word-break: break-all;color: #000;background-color: white;border-top: solid;border-color: #e6e6e6;border-width: 0px;">

                    <input ng-model="sAuthcode" type="text" name="phone1" placeholder="输入密码" style="padding:0 12px 0 12px;position: absolute;top: 1vw;left: 4vw;width: 72vw;height: 11vw;line-height: 6.5vw;border-style: solid;border-width: 1px;border-radius: 0.5vh;border-color: #e6e6e6;font-size: 4vw;-webkit-appearance: none;">

                </div>
                <div style="height: 2.2vw;"></div>
                <div style="position: relative; left: 4vw;width: 72vw;line-height: 10vw; font-size: 4vw;display: flex;border-radius: 2vw;"
                    ng-click="bindPhone()">
                    <div style="display: block;-webkit-box-flex:1;flex: 1;text-decoration: none;-webkit-tap-highlight-color:transparent;position: relative;margin-bottom: 0;color: rgb(255,255,255);border-top: solid;border-color: #e6e6e6;border-width: 0px;background-color: rgb(64,112,251);border-radius: 5vw;">设置</div>
                </div>
                <div style="height: 4vw;"></div>
            </div>
        </div>

    </div>

    <script type="text/javascript">
        document.body.addEventListener('touchmove', function (e) {
  e.preventDefault();
}, {passive: false});
        var app = angular.module('app', [])

        app.directive('ngInput', [function () {
            return {
                restrict: 'A',
                require: '?ngModel',
                link: function (scope, element, attrs) {
                    element.on('input', oninput);
                    scope.$on('$destroy', function () {//销毁的时候取消事件监听
                        element.off('input', oninput);
                    });
                    function oninput(event) {
                        scope.$evalAsync(attrs['ngInput'], { $event: event, $value: this.value });
                    }
                }
            }
        }]);

        app.controller("myCtrl", function ($scope, $http) {
			 $scope.userInfo = userInfo;
            $scope.userList = [];
            $scope.isShowValid = true;
            $scope.isShowUser = false;
            var win = {
                width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
            }
            $.alert = function (msg, fn, style, sec) {
                style = style || 'success';
                if (typeof (fn) == 'string') {
                    style = fn;
                }
                if (!sec) {
                    if (style == 'error' || style == 'puncherror') {
                        sec = 9;
                    } else {
                        sec = 0;
                    }
                }
                var mask = $('<div>').addClass('alert-mask');
                var box = $('<div>').addClass('resourceBox ' + style).attr('id', 'alertBox');
                box.html('<div class="context">' + msg + '</div>');
                box.appendTo(mask);
                mask.appendTo('body');
                var h = win.width / 360 * 100;
                box.css({ 'opacity': 1, 'margin-top': -1 * (box.height() + h) / 2 });
                if (sec >= 9) {
                    var alertBoxLay = $('<div>').addClass('alertBoxLay').appendTo('body');
                    $('<a>').attr('href', 'javascript:void(0);').addClass('closed').appendTo(box).text('确认');
                    $('#alertBox a.closed, .alertBoxLay').click(function () {
                        box.css({ 'opacity': 0, 'margin-top': -1 * (box.height() + h) });
                        alertBoxLay.css('opacity', 0);
                        mask.remove();
                        setTimeout(function () {
                            box.remove();
                            alertBoxLay.remove();
                            if (typeof (fn) == 'function') fn();
                        }, 500);
                    });
                } else {
                    setTimeout(function () {
                        box.css({ 'opacity': 0, 'margin-top': -1 * (box.height() + h) });
                        setTimeout(function () {
                            box.remove();
                            if (typeof (fn) == 'function') fn();
                        }, 500);
                    }, 1000 + sec * 1000);
                }
            };

            /* 绑定手机 */
            $scope.phone = "";
            $scope.sPhone = "";
            $scope.sAuthcode = "";

            setTimeout(function () {
                $scope.$apply();
            }, 100);

            $scope.bindPhoneHttp = function (phone, authcode) {
                $http({
                    url: domain + '/cos/setPassword',
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    data:{
                        'code':authcode,
                        'phone':phone,"token":token,
                        'open_id':token
                    }
                }).success(function (data) {

                    if (data.result == 0) {
                        $scope.isShowValid = false;

                            $.alert(data.result_message, 'error');
                            $scope.userList[0] = data.data.account;
                            $scope.selectId = $scope.userList[0].open_id;
                        
                        setTimeout(function () {
                            
                            $scope.phone = $scope.sPhone;

                            //$scope.sPhone = '';
                            //$scope.sAuthcode = '';
                            $scope.isShowValid = true;
                            $scope.$apply();

                           
                        }, 800);
                     
                    } else {
                        setTimeout(function () {
                            $.alert(data.result_message, 'error');
                            $scope.isShowValid = true;
                            $scope.$apply();
                        }, 0);
                    }
                }).error(function (data) {
                    setTimeout(function () {
                        $scope.authcodeTime = 0;
                        $.alert("设置失败", 'error');
                        $scope.isShowValid = true;
                        $scope.$apply();
                    }, 0);
                });
            };

            $scope.bindPhone = function () {
                var validPhone = checkPhone($scope.sPhone);
                var validAuthcode = checkAuthcode($scope.sAuthcode);

                if (validPhone == false) {
                    setTimeout(function () {
                        $.alert('账号格式不对，请重填', 'error');
                    }, 0);

                    return;
                }

                if (validAuthcode == false) {
                    setTimeout(function () {
                        $.alert('密码格式不对，请重填', 'error');
                    }, 0);

                    return;
                }
                $scope.isShowValid = false;
               
                $scope.bindPhoneHttp($scope.sPhone, $scope.sAuthcode);
            };

            $scope.phoneChange = function () {
                var result = checkPhone($scope.sPhone);
                if (result) {
                    $('#authcode').css('background-color', 'rgb(64,112,251)');
                } else {
                    $('#authcode').css('background-color', 'lightgray');
                }
            };

            function checkPhone(phone) {

                if (!(/^[A-Za-z0-9]{4,16}$/.test(phone))) {
                    return false;
                } else {
                    return true;
                }
            };

            function checkAuthcode(code) {
                if (code == '' || code == undefined) {
                    return false;
                }

                var reg = new RegExp("^[A-Za-z0-9]{4,16}$");
                if (!reg.test(code)) {
                    return false;
                } else {
                    return true;
                }
            };


        })
    </script>

</body>

</html>